<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.0.13/css/regular.css" integrity="sha384-HLkkol/uuRVQDnHaAwidOxb1uCbd78FoGV/teF8vONYKRP9oPQcBZKFdi3LYDy/C"
    crossorigin="anonymous">
  <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.0.13/css/fontawesome.css" integrity="sha384-LDuQaX4rOgqi4rbWCyWj3XVBlgDzuxGy/E6vWN6U7c25/eSJIwyKhy9WgZCHQWXz"
    crossorigin="anonymous">
  <title>Document</title>
  <!-- <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet"> -->
  <style>
    * {
      box-sizing: border-box;
      position: relative;
    }

    :root {
      --header-space: 6rem;
      --header-height: 4rem;
    }

    html,
    body {
      height: 100%;
      width: 100%;
      margin: 0;
      padding: 0;
      font-family: Lato, sans-serif;
      font-size: 14px;
    }

    body {
      display: flex;
      justify-content: center;
      align-items: center;
    }

    #app {
      overflow: hidden;
    }

    .ui-phone {
      height: 660px;
      width: 300px;
      outline: 1px solid;
      background-image: linear-gradient(to bottom, #FAB159, #F76082);
    }

    .ui-header {
      height: var(--header-height);
      display: grid;
      grid-template-rows: 1fr 1fr;
      z-index: 2;
      overflow: hidden;
    }

    .ui-scene-header {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      transition: opacity .6s;
      display: grid;
      grid-template-columns: 2rem 1fr 2rem;
      padding: 0 1rem;
    }

    [data-state]:not([data-state="home"]) .ui-scene-header[data-show="home"],
    [data-state]:not([data-state="group"]) .ui-scene-header[data-show="group"],
    [data-state]:not([data-state="new"]) .ui-scene-header[data-show="new"] {
      display: grid;
      opacity: 0;
      pointer-events: none;
    }

    .ui-heading {
      font-size: 2rem;
    }

    .ui-title {
      font-weight: bold;
      justify-self: center;
      align-self: center;
    }

    .ui-scene.-group {
      width: 100%;
      height: 100%;
      padding: 2rem;
      padding-top: var(--header-space);
      display: grid;
      grid-template-rows: 1fr 1fr 1fr 1fr 6fr;
      --bg: white;
    }

    .ui-scene.-group>.ui-icon {
      align-self: center;
    }

    .ui-scene.-group>.ui-progress {
      align-self: start;
    }

    .ui-paragraph {
      margin: 0;
    }

    .ui-scene {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }

    .ui-scene.-home {
      display: block;
    }

    .ui-scene.-home>.ui-layer {
      display: grid;
      padding-top: var(--header-space);
      grid-template-rows: 1fr 1fr 1fr 1fr 6fr;
      grid-template-columns: 2rem 1fr;
      grid-template-areas: "_ avatar" "_ heading" "_ paragraph" "_ date" "_ cards";
      color: white;
    }

    .ui-icon.-avatar {
      grid-area: avatar;
      background-color: white;
      align-self: center;
    }

    .ui-layer>.ui-heading {
      grid-area: heading;
      align-self: center;
    }

    .ui-date {
      grid-area: date;
      align-self: end;
      margin-bottom: 1rem;
      font-size: .75rem;
      font-weight: bold;
      text-transform: uppercase;
    }

    .ui-cards {
      display: flex;
      flex-direction: row;
      grid-area: cards;
    }

    .ui-card {
      width: 230px;
      height: 300px;
      margin-right: 1rem;
      max-width: 100%;
      flex-shrink: 0;
      display: grid;
      grid-template-rows: 1fr 3rem 3rem 3rem;
      padding: 1rem 1rem 0;
      border-radius: .5rem;
      --bg: white;
      color: #333;
    }

    .ui-progress {
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: .75rem;
    }

    .ui-progress-line {
      height: .25rem;
      width: calc(100% - 2rem);
    }

    .ui-progress-line::before,
    .ui-progress-line::after {
      display: block;
      position: absolute;
      content: '';
      height: 100%;
      top: calc(50% - .125rem);
      left: 0;
    }

    .ui-progress-line::before {
      width: calc(100% - 2rem);
      background: gray;
    }

    .ui-progress-line::after {
      width: calc(100% * var(--progress) / 100 - 2rem);
      background: blue;
    }

    .ui-scene.-new {
      display: grid;
      padding-top: var(--header-space);
      grid-template-rows: 1fr 1fr 8fr;
      grid-template-columns: 2rem 1fr 2rem;
    }

    .ui-scene.-new> :not(.ui-bg) {
      grid-column: 2 / span 1;
    }

    .ui-layer>* {
      grid-column: 2 / 3;
    }

    .ui-bg {
      background-color: var(--bg);
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
      border-radius: inherit;
    }

    .ui-layer {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }

    .ui-layer.-cards {
      overflow-y: scroll;
    }

    .ui-tasks {
      align-self: end;
    }

    .ui-icon {
      height: 3rem;
      width: 3rem;
      border-radius: 50%;
      background: blue;
    }

    .ui-all-todos {
      overflow-y: auto;
    }

    .ui-todos {
      margin: 0;
      padding: 0;
      list-style-type: none;
      margin-bottom: .5rem;
    }

    .ui-label {
      display: grid;
      grid-template-columns: 2rem 1fr 2rem;
      padding: 1rem 0;
    }

    .ui-label>input[type="checkbox"] {
      opacity: 0;
      grid-column: 1 / 2;
    }

    .ui-todo-title {
      grid-column: 2 / 3;
    }

    :checked+.ui-todo-title {
      opacity: 0.5;
    }

    .ui-subheading {
      font-size: .75rem;
      font-weight: bold;
    }

    .ui-fab {
      width: 3rem;
      height: 3rem;
      border-radius: 4rem;
      --bg: blue;
      position: absolute;
      right: 2rem;
      bottom: 4rem;
      color: white;
      transition: transform .6s;
      transform: scale(1);
      display: flex;
      justify-content: center;
      align-items: center;
      border: none;
    }

    @keyframes flatten-radius {
      from {
        border-radius: 50%;
      }
      to {
        border-radius: 0;
      }
    }

    .ui-fab:focus {
      outline: none;
    }

    [data-state="home"] .ui-fab {
      transform: scale(0);
      pointer-events: none;
    }

    [data-state="new"] .ui-fab {
      border-radius: 0;
    }

    [data-state="new"] .ui-fab>.ui-bg[data-flip-state="active"] {
      animation: flatten-radius .6s ease-in-out;
    }

    [data-state="group"] .ui-fab>.ui-bg[data-flip-state="active"] {
      animation: flatten-radius .6s ease-in-out reverse;
    }

    @keyframes fade-in {
      from {
        opacity: 0;
      }
      to {
        opacity: 1;
      }
    }

    @keyframes fade-out {
      from {
        opacity: 1;
      }
      to {
        opacity: 0;
      }
    }

    [data-state]:not([data-state="home"]) [data-show="home"] {
      display: none;
    }

    [data-state="home"] [data-scene="group"] {
      display: none;
    }

    [data-state]:not([data-state="new"]) [data-show="new"] {
      display: none;
    }

    [data-state]:not([data-state="new"]) .ui-scene.-new {
      transform: translateY(100%);
    }

    [data-state="new"] .ui-scene.-new {
      transform: none;
    }

    [data-state="new"] .ui-fab {
      bottom: 0;
      left: 0;
      width: 100%;
    }

    [data-state="new"] .ui-fab>.ui-bg {
      border-radius: 0;
    }

    .ui-scene.-new {
      transition: transform .6s;
      --bg: white;
      display: grid;
      grid-template-rows:
    }
  </style>
</head>

<body>
  <div id="app" class="ui-phone" data-state="home">
    <header class="ui-header">
      <div class="ui-notch"></div>
      <div class="ui-scene-headers">
        <div class="ui-scene-header" data-show="home">
          <div class="ui-small-icon"></div>
          <div class="ui-title">TODO</div>
          <div class="ui-small-icon"></div>
        </div>
        <div class="ui-scene-header" data-show="group">
          <div class="ui-small-icon" data-event="BACK"><i class="fas fa-camera-retro"></i></div>
        </div>
        <div class="ui-scene-header" data-show="new">
          <div class="ui-small-icon" data-event="BACK">bk</div>
          <div class="ui-title">New Task</div>
          <div class="ui-small-icon"></div>
        </div>
      </div>
    </header>
    <div class="ui-scene -home" data-scene="home">
      <div class="ui-layer">
        <div class="ui-icon -avatar"></div>
        <div class="ui-heading">Hello, Jane.</div>
        <p class="ui-paragraph">
          You have 3 tasks to do today.
        </p>
        <span class="ui-date">Sunday March 11, 2018</span>
      </div>
      <div class="ui-layer -cards">
        <div class="ui-cards">
          <div class="ui-card">
            <div class="ui-bg" data-flip-key="bg-1"></div>
            <div class="ui-icon" data-flip-key="icon-1"></div>
            <div class="ui-tasks" data-flip-no-scale data-flip-key="tasks-1">9 Tasks</div>
            <div class="ui-heading" data-flip-no-scale data-flip-key="heading-1">Personal</div>
            <div class="ui-progress" style="--progress: 83" data-flip-key="progress-1" data-flip-no-scale>
              <div class="ui-progress-line" data-flip-key="progress-line-1"></div>
              <div class="ui-progress-value" data-flip-key="progress-value-1">83%</div>
            </div>
          </div>
          <div class="ui-card">
            <div class="ui-bg" data-flip-key="bg"></div>
            <div class="ui-tasks" data-flip-no-scale data-flip-key="tasks">9 Tasks</div>
            <div class="ui-heading" data-flip-no-scale data-flip-key="heading">Personal</div>
            <div class="ui-progress" style="--progress: 83">
              <div class="ui-progress-line"></div>
              <div class="ui-progress-value">83%</div>
            </div>
          </div>
          <div class="ui-card">
            <div class="ui-bg" data-flip-key="bg"></div>
            <div class="ui-tasks" data-flip-no-scale data-flip-key="tasks">9 Tasks</div>
            <div class="ui-heading" data-flip-no-scale data-flip-key="heading">Personal</div>
            <div class="ui-progress" style="--progress: 83">
              <div class="ui-progress-line"></div>
              <div class="ui-progress-value">83%</div>
            </div>
          </div>
          <div class="ui-card">
            <div class="ui-bg" data-flip-key="bg"></div>
            <div class="ui-tasks" data-flip-no-scale data-flip-key="tasks">9 Tasks</div>
            <div class="ui-heading" data-flip-no-scale data-flip-key="heading">Personal</div>
            <div class="ui-progress" style="--progress: 83">
              <div class="ui-progress-line"></div>
              <div class="ui-progress-value">83%</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="ui-scene -group" data-scene="group">
      <div class="ui-bg" data-flip-key="bg-1"></div>
      <div class="ui-icon" data-flip-key="icon-1"></div>
      <div class="ui-tasks" data-flip-no-scale data-flip-key="tasks-1">9 Tasks</div>
      <div class="ui-heading" data-flip-no-scale data-flip-key="heading-1">Personal</div>
      <div class="ui-progress" style="--progress: 83" data-flip-key="progress-1" data-flip-no-scale>
        <div class="ui-progress-line" data-flip-key="progress-line-1"></div>
        <div class="ui-progress-value" data-flip-key="progress-value-1">83%</div>
      </div>
      <div class="ui-all-todos" data-flip-key="todos-1" data-flip-follow="tasks-1">
        <div class="ui-subheading">Today</div>
        <ul class="ui-todos">
          <li class="ui-todo">
            <label class="ui-label">
              <input type="checkbox" name="" id="">
              <span class="ui-todo-title">Do this thing</span>
            </label>
          </li>
          <li class="ui-todo">
            <label class="ui-label">
              <input type="checkbox" name="" id="">
              <span class="ui-todo-title">Do this thing</span>
            </label>
          </li>
          <li class="ui-todo">
            <label class="ui-label">
              <input type="checkbox" name="" id="">
              <span class="ui-todo-title">Do this thing</span>
            </label>
          </li>
          <li class="ui-todo">
            <label class="ui-label">
              <input type="checkbox" name="" id="">
              <span class="ui-todo-title">Do this thing</span>
            </label>
          </li>
        </ul>
        <div class="ui-subheading">Tomorrow</div>
        <ul class="ui-todos">
          <li class="ui-todo">
            <label class="ui-label">
              <input type="checkbox" name="" id="">
              <span class="ui-todo-title">Do this thing</span>
            </label>
          </li>
          <li class="ui-todo">
            <label class="ui-label">
              <input type="checkbox" name="" id="">
              <span class="ui-todo-title">Do this thing</span>
            </label>
          </li>
          <li class="ui-todo">
            <label class="ui-label">
              <input type="checkbox" name="" id="">
              <span class="ui-todo-title">Do this thing</span>
            </label>
          </li>
          <li class="ui-todo">
            <label class="ui-label">
              <input type="checkbox" name="" id="">
              <span class="ui-todo-title">Do this thing</span>
            </label>
          </li>
          <li class="ui-todo">
            <label class="ui-label">
              <input type="checkbox" name="" id="">
              <span class="ui-todo-title">Do this thing</span>
            </label>
          </li>
        </ul>
      </div>
    </div>
    <div class="ui-scene -new" data-scene="new">
      <div class="ui-bg"></div>
      <div class="ui-question">What task are you planning to do?</div>
      <input type="text" class="ui-input">
      <ul class="ui-groups">
        <li class="ui-group">
          <input type="checkbox">
          <label class="ui-label">Work</label>
        </li>
        <li class="ui-group">
          <input type="checkbox">
          <label class="ui-label">Today</label>
        </li>
      </ul>
    </div>

    <button class="ui-fab" data-flip-key="add" data-flip-no-scale>
      <div class="ui-bg" data-flip-key="add-bg"></div>
      <div class="ui-fab-icon" data-flip-key="add-icon" data-flip-no-scale>+</div>
    </button>
  </div>
  </div>
  <script src="../dist/flipping.web.js"></script>
  <script>
    // const h = new Hammer(document.querySelector('.ui-cards'));
    // h.on('pan', ev => console.log(ev));
    const machine = {
      initial: 'home',
      states: {
        home: {
          on: { CARD: 'group' }
        },
        group: {
          on: { BACK: 'home', NEW: 'new' }
        },
        new: {
          on: {
            BACK: 'group'
          }
        }
      }
    };

    let state = machine.initial;

    const flipping = new Flipping({
      duration: 600,
      activeSelector: el => el.matches(`.ui-fab, .ui-fab *, [data-scene="${state}"] *`)
    });

    const transition = flipping.wrap(event => {
      console.log({ event });
      state = machine.states[state].on[event] || state;
      document.querySelector('[data-state]').setAttribute('data-state', state);
    });

    document.querySelector('.ui-card').addEventListener('click', e => {
      transition('CARD');
    });

    document.querySelector('.ui-scene.-group').addEventListener('click', e => {
      transition('GROUP');
    });

    document.querySelector('.ui-fab').addEventListener('click', e => {
      transition('NEW');
    });

    document.querySelectorAll('[data-event="BACK"]')
      .forEach(el => el.addEventListener('click', e => {
        transition('BACK');
      }));
  </script>
</body>

</html>
